<template>
  <div id="app">
    <div class="bg" v-if="Islogin"></div>
    <div class="music" v-if="Islogin">
        <span>网易云音乐</span>
    </div>
   <div class="login" v-if="Islogin">
      <input type="text" name="账号" value="" placeholder="请输入手机号" v-model="phone" style="margin-top:.5rem;">
      <input type="password" name="密码" value="" placeholder="请输入密码" v-model="password">
      <button type="button" @click="login()">登陆</button>
    </div>
    <div class="buttom" v-if="Isbar">
      <mu-container style="max-width: 400px; width:100%;">
        <mu-bottom-nav
        :value="bottomNav" shift
        color="red"
        @change="handleChange"
        >
          <mu-bottom-nav-item value="Finds" title="发现" icon="track_changes" to="/Finds"></mu-bottom-nav-item>
          <mu-bottom-nav-item value="Mine" title="我的" icon="music_video" to="/Mine"></mu-bottom-nav-item>
          <mu-bottom-nav-item value="Friends" title="朋友" icon="group" to="/Friends"></mu-bottom-nav-item>
          <mu-bottom-nav-item value="Myid" title="账号" icon="person_outlin" to="/Myid"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-container>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      phone:"",
      password:"",
      bottomNav: 'Finds',  //导航栏默认选中
      Isbar:false,
      Islogin:true
    }
  },
  methods:{
    handleChange(value){
       this.bottomNav = value
          console.log(this.bottomNav)
    },
//     fetchData () { // 隨便起一個名字
//     // 這裏要根據你自己路由的名稱，指定與之對應的bottomNav值
//     if (this.$route.path === "/Finds") {
//         this.bottomNav = "Finds"
//     }
//     if (this.$route.path === "/Mine") {
//         this.bottonNav = "Mine"
//     }
// },
    login(){
      this.axios({
        url: this.HOST+"/login/cellphone",
        method: "post",
        params: {
          phone: this.phone,
          password: this.password
        }
      }).then((res=>{
        if(res.data.code==200){
           this.$toast.success('你好,'+res.data.profile.nickname);
           let uuid=res.data.account.id
           localStorage.setItem('uuid',uuid);
           localStorage.setItem("phone",this.phone)
           localStorage.setItem("password",this.password)
           this.$router.push("/Finds");
           this.Isbar=true;
           this.Islogin=false;
        }else{
           this.$toast.error('登陆失败，请检查账号密码是否正确！');
        }
        })).catch(function(err){
          console.log(err)
        })
    }

  },
  mounted(){

  },
  created(){
    if(this.$route.name == 'Finds'||this.$route.name == 'Mine'||this.$route.name == 'Friends'||this.$route.name == 'Myid'){
      this.Isbar = true
      this.Islogin=false;
    }
    if (this.$route.path === "/Finds") {
         this.bottomNav = "Finds"
     }
     if (this.$route.path === "/Mine") {
          this.bottomNav = "Mine"
      }
      if (this.$route.path === "/Friends") {
           this.bottomNav = "Friends"
       }
       if (this.$route.path === "/Myid") {
            this.bottomNav = "Myid"
        }
    // console.log(this.$route.path)
    // this.fetchData ()


  },
  watch:{
     // '$route': 'fetchData'
    // $route(to, from) {
    //   console.log(to.name)
    //   if(to.name == 'Finds') {
    //     this.Isbar = true
    //     this.Islogin=false;
    //     }
    // }
  }
}
</script>

<style>
@import 'https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';
.buttom{
  width: 100%;
  position: fixed;
  bottom: 0px;
  background: #2196f3;
}
.buttom .container{
  width: 100%;
  padding-right: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
.music{
  font-size: .5rem;
  margin-top: -.9rem;
  text-align: center;
}
body{
  margin: 0;
  padding: 0;
  list-style: none;

}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;

}
.bg{
  width: 100%;
  height: 4.5rem;
  background-image: url('./assets/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-x: center;
  background-position-y: center;
}
.bg img{
  width: 100%;
}
.login{
  display: flex;
  flex-flow:column;
  justify-content: center;
  align-items: center
}
.login input {
  width: 58%;
  height: 0.5rem;
  border: 1px solid;
  border-radius: 5px;
  margin-bottom: 0.4rem;
}
.login button{
  width: 60%;
  height: .55rem;
  border-radius: 10px;
  border: 1px solid red;
  background: #E41C1C;
  color: white;
  font-size: .26rem;
  line-height: .55rem;

}
</style>
